import React from "react";
import "./My.scss";

function My(props) {
  const logout = () => {
    setPhone('');
    setToken('');
  };

  return (
    <div>
      <div className="my-index w100pc f16">
        <div
          className="header rel"
          style={{ backgroundImage: "url(assest/img/avtBg.jpg)" }}
        >
          <div className="user abs">
            <img src="assest/img/avatar.png" className="photo" alt="" />
            {props.token ? (
              <span className="fff ml-10">{props.phone}</span>
            ) : (
              <Link to="/login" className="phone f18 ml-10 fff">
                立即登录
              </Link>
            )}
          </div>
        </div>

        <div className="selection bg-fff mt-5">
          <div className="item flex jc-sb bdb">
            <div className="item-l">我的订单</div>
            <img className="item-r" src="assest/img/rightArrow.png" alt="" />
          </div>
          <div className="item flex jc-sb bdb">
            <div className="item-l">我的共享卡</div>
            <img className="item-r" src="assest/img/rightArrow.png" alt="" />
          </div>
          <div className="item flex jc-sb bdb">
            <div className="item-l">优惠券</div>
            <img className="item-r" src="assest/img/rightArrow.png" alt="" />
          </div>
          <div className="item flex jc-sb bdb">
            <div className="item-l">我想去</div>
            <img className="item-r" src="assest/img/rightArrow.png" alt="" />
          </div>
          <div className="item flex jc-sb bdb">
            <div className="item-l">浏览记录</div>
            <img className="item-r" src="assest/img/rightArrow.png" alt="" />
          </div>
          <div className="item flex jc-sb bdb">
            <div className="item-l">购物车数量({props.count})</div>
            <button onClick={()=>{props.setCount(props.count+1)}}>修改数量</button>
          </div>
        </div>

        <div className="loginout">
          <button onClick={logout} className="exit fff">
            退出登录
          </button>
        </div>
      </div>
    </div>
  );
}

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { setPhone, setToken} from "redux/user";
import { setCount } from "redux/cart";
import { Link } from "react-router-dom";

// 将state映射到props里， 这样state里的状态就可以使用props.xx来读取
function mapStateToProps(state) { 
  return {
    phone: state.user.phone,
    token: state.user.token,
    count: state.cart.count
  };
}

function mapDispatchToProps(dispatch) {
  return {
    // 绑定action creator，使其可以生效
    setPhone: bindActionCreators(setPhone, dispatch),
    setToken: bindActionCreators(setToken, dispatch),
    setCount: bindActionCreators(setCount, dispatch),
  };
}

// 使用connect吧普通组件变成高阶组件
export default connect(mapStateToProps, mapDispatchToProps)(My);
